<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="120px"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="dataForm.name" placeholder="定制师名称"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="intro">
        <el-input v-model="dataForm.intro" placeholder="定制师简介"></el-input>
      </el-form-item>
      <el-form-item label="等级" prop="level">
        <el-input v-model="dataForm.level" placeholder="定制师等级"></el-input>
      </el-form-item>
      <el-form-item label="头像" prop="avatar">
        <!-- <el-input v-model="dataForm.avatar" placeholder="定制师头像"></el-input> -->
        <single-upload v-model="dataForm.avatar"></single-upload>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import singleUpload from "@/components/upload/singleUpload";
export default {
  components: { singleUpload },
  data() {
    return {
      visible: false,
      roleList: [],
      dataForm: {
        id: "",
        name: "",
        intro: "",
        level: 1, //默认等级
        avatar: "",
        sort: 0,
      },
      dataRule: {
        name: [
          {
            validator: (rule, value, callback) => {
              if(value == ""){
                callback(new Error("定制师名称必须填写"))
              }else{
                this.$http({
                url: this.$http.adornUrl("/route/advisor/getAdvisorByName"),
                method: "get",
                params: this.$http.adornParams({
                  name: this.dataForm.name
                }),
              }).then(({ data }) => {
                console.log(data)
                if(data === 1){
                  callback(new Error("此名称已被占用，换一个吧~"))
                }else{
                  callback()
                }
              });
              }
            },
            trigger: "blur"
          },
        ],
      },
    };
  },
  created() {},
  methods: {
    //新增/修改
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        //新增则初始化数据
        this.$refs["dataForm"].resetFields();
        //修改则回显数据
        if (this.dataForm.id) {
          console.log(this.dataForm.id);
          this.$http({
            url: this.$http.adornUrl(
              `/route/advisor/getAdvisorById/${this.dataForm.id}`
            ),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            console.log(data.data);
            this.dataForm.name = data.data.advisor.name;
            this.dataForm.intro = data.data.advisor.intro;
            this.dataForm.level = data.data.advisor.level;
            this.dataForm.avatar = data.data.advisor.avatar;
            this.dataForm.sort = data.data.advisor.sort;
          });
        }
      });
    },

    //提交表单
    dataFormSubmit() {
      this.$http({
        url: this.$http.adornUrl(
          `/route/advisor/${!this.dataForm.id ? "addAdvisor" : "updateAdvisor"}`
        ),
        method: "post",
        data: this.$http.adornParams({
          id: this.dataForm.id || undefined,
          name: this.dataForm.name,
          intro: this.dataForm.intro,
          level: this.dataForm.level,
          avatar: this.dataForm.avatar,
          sort: this.dataForm.sort,
        }),
      }).then(({ data }) => {
        console.log("添加返回值", data);
        if (data && data.code === 20000) {
          //提示信息
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.visible = false;
              this.$emit("refreshDataList");
            },
          });
        }else{
          this.$message.error('操作失败');
        }
      });
    },
  },
};
</script>